<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试swoole通信</title>
    <style>
        #show {
            border: 1px solid gold;
            text-align: left;
            overflow: auto;
            height: 300px;
            width: 60%;
            margin: 0 auto;
        }

        #button {
            width: 60%;
            height: 20%;
            margin: 0 auto;
            text-align: left;
        }

        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="show">

    </div>

    <div id="button">
        文本消息（回车发送）：
        <input type="text" id='output' onblur="send()" onkeydown="clickSend()">

        <!-- <h2>录音、编码</h2> -->
        <div id="recorder-amr">
            <p>
                <button id="amr-record">开始录音</button>
                <button id="amr-play-record" disabled>播放录音</button>
                <a href="#" id="amr-down-record">
                    <!-- 下载录音amr文件--></a>
                <span id="amr-record-duration">0'</span>
                <button id="send-record">发送语音消息</button>
            </p>
        </div>
    </div>

    <script src="./BenzAMRRecorder.js"></script>
    <script>
        var wsServer = 'ws://118.24.26.76:9502';
        var ws = new WebSocket(wsServer);
        ws.onopen = function (evt) {
            console.log("Connected to WebSocket server.");
        };

        ws.onclose = function (evt) {
            console.log("Disconnected");
        };

        ws.onmessage = function (evt) {
            switch (evt.data) {
                case 'ping':
                    ws.send('pong');
                    break;
                default:
                    var show = document.getElementById('show')
                    show.innerHTML = show.innerHTML + "<br>" + evt.data
                    show.scrollTop = show.scrollHeight;
                    break;

            }
            // console.log('Retrieved data from server: ' + evt.data);
        };

        ws.onerror = function (evt, e) {
            console.log('Error occured: ' + evt.data);
        };

        window.onload = function () {
            var input = document.getElementById('output')
            input.focus()
        }

        function send() {
            var input = document.getElementById('output')
            if (input.value) {
                console.log(input.value)
                ws.send("{'type':'text','data':'" + input.value + "'}")
            }
        }

        function clickSend() {
            // 兼容FF和IE和Opera
            var theEvent = window.event;
            var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            var input = document.getElementById('output')
            if (code == 13 && input.value) {
                ws.send(input.value)
                input.value = ''
            }
        }


        /***** 录音、编码 *****/

        function E(selector) {
            return document.querySelector(selector);
        }

        var amrForRecorder;

        var recordBtn = E('#amr-record');
        var playRecordBtn = E('#amr-play-record');
        var downRecordLink = E('#amr-down-record');
        var recordDuration = E('#amr-record-duration');

        recordBtn.onclick = function () {
            if (amrForRecorder && amrForRecorder.isRecording()) {
                recordBtn.innerHTML = '开始录音';
                playRecordBtn.removeAttribute('disabled');
                amrForRecorder.finishRecord().then(() => {
                    downRecordLink.href = window.URL.createObjectURL(amrForRecorder.getBlob());
                    downRecordLink.innerHTML = '下载录音amr文件';
                    recordDuration.innerHTML = amrForRecorder.getDuration().toFixed(2) + '\'';
                });
            } else {
                recordBtn.innerHTML = '停止录音';
                playRecordBtn.setAttribute('disabled', true);
                amrForRecorder = new BenzAMRRecorder();
                amrForRecorder.initWithRecord().then(() => {
                    amrForRecorder.startRecord();
                }).catch(function (e) {
                    alert(e.message || e.name || JSON.stringify(e));
                });

                // 绑定事件
                amrForRecorder.onPlay(function () {
                    console.log('Recorder Event: play');
                    playRecordBtn.innerHTML = '停止播放';
                });
                amrForRecorder.onStop(function () {
                    console.log('Recorder Event: stop');
                    playRecordBtn.innerHTML = '播放录音';
                });
                amrForRecorder.onEnded(function () {
                    console.log('Recorder Event: ended');
                    playRecordBtn.innerHTML = '播放录音';
                });
                amrForRecorder.onAutoEnded(function () {
                    console.log('Recorder Event: autoEnded');
                });
                amrForRecorder.onStartRecord(function () {
                    console.log('Recorder Event: startRecord');
                    recordBtn.innerHTML = '停止录音';
                });
                amrForRecorder.onFinishRecord(function () {
                    console.log('Recorder Event: finishRecord');
                    recordBtn.innerHTML = '开始录音';
                });
                amrForRecorder.onCancelRecord(function () {
                    console.log('Recorder Event: cancelRecord');
                    recordBtn.innerHTML = '开始录音';
                });
            }
        };

    </script>
</body>

</html>